<template>
	<view class="container">
		<view class="container-navbar">
			<u-navbar title="确认订单" title-color="#fff" back-icon-color="#fff" :border-bottom="false" :background="navbarBack"></u-navbar>
		</view>
		<view class="comeaddinfo">
			<view class="comeaddtext" @tap="changeAddress()">
				<text class="addtext" v-if="comeadd==''">请选择上门地址</text>
				<text class="addtext" v-else>{{comeadd}}</text>
				<u-icon name="/static/icon_zy_189.png" size="22"></u-icon>
			</view>
			<view class="username-phone" v-if="comeadd!=''">
				<text>{{username}}</text>
				<text class="userphone">{{userphone}}</text>
			</view>
			<view class="workername">
				<text>雇佣师傅：{{workerInfo.name}}</text>
			</view>
		</view>
		<view class="ordertime-wtype-box">
			<view class="ordertime-wtype-item">
				<text class="itemtitle">时间</text>
				<view class="itemright">
					<text class="changedate"  @tap="opendate()" v-if="subscribeTime==''">请选择上门日期</text>
					<text class="changedate changed"  @tap="opendate()" v-else>{{subscribeTime}}</text>
					<text class="changeclock" @tap="openTimepicker()" v-if="!issetTime">请选择上门时间段</text>
					 <text class="changeclock changed" @tap="openTimepicker()" v-else>{{timequjian}}</text>
				</view>
			</view>
			<view class="ordertime-wtype-item">
				<text class="itemtitle">工种</text>
				<view class="itemright" @tap="openWorktypelist(workerInfo.nameOfWorkType)">
					<text class="changework-type">{{plaseChooseWork}}</text>
					<u-icon name="/static/icon_zy_189.png" size="18"></u-icon>
				</view>
			</view>
			<view class="ordertime-wtype-item lastitem">
				<text class="itemtitle">售后</text>
				<view class="itemright">
					<text class="worker-shtime">售后{{workerInfo.afterSalesDays}}天</text>
				</view>
			</view>
		</view>
		<view class="payprice-info">
			<view class="payprice-infoitem input-price">
				<text class="itemtitle">金额</text>
				<input type="number" value="" placeholder="请输入金额" @input="inputOrderprice" :disabled="priceDisable"/>
			</view>
			<view class="payprice-infoitem coupon-select" @tap="selectCoupon()">
				<text class="itemtitle">优惠券</text>
				<u-icon name="/static/icon_zy_189.png" size="18"></u-icon>
			</view>
			<view class="payprice-infoitem other-service lastitem" @tap="useOtherservice()">
				<view class="other-service-left">
					<text class="service-title">准时达 PLUS 配送增值服务</text>
					<text class="service-value">工人约定时间未上门，扣除部分保证金返还用户</text>
				</view>
				<view class="other-service-right">
					<text class="other-serviceprice">￥0.2</text>
					<view class="check-select notcheck" v-if="!isCheckedotherservice"></view>
					<view class="check-select checked" v-else>
						<text>√</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-methods">
			<text class="pay-methods-title">支付方式</text>
			<view class="paymethod-item" @tap="changePaymethod(0)">
				<view class="paymethod-item-left">
					<u-icon name="/static/icon_zfb_55.png" size="40"></u-icon>
					<text>支付宝</text>
				</view>
				<view class="paymethod-item-right" :class="{'checked':checkMethodindex==0,'notcheck':checkMethodindex!=0}">
					<text>√</text>
				</view>
			</view>
			<view class="paymethod-item" @tap="changePaymethod(1)">
				<view class="paymethod-item-left">
					<u-icon name="/static/icon_wx_56.png" size="40"></u-icon>
					<text>微信</text>
				</view>
				<view class="paymethod-item-right" :class="{'checked':checkMethodindex==1,'notcheck':checkMethodindex!=1}">
					<text>√</text>
				</view>
			</view>
		</view>
		<view class="getpay">
			<view class="getpay-left">
				<text class="getpay-left-title">实付：</text>
				<text class="pay-price">￥{{totalfee|getPriceTofixedtwo}}</text>
			</view>
			<view class="getpay-btn" @tap="requestConfirmorder()">
				<text>去支付</text>
			</view>
		</view>
		<!-- 硬装类-工种分类 -->
		<u-popup mode="bottom" v-model="isShowworkTypepopup" @close="workClose">
			<view class="worktypes">
				<view class="worktype-item" v-for="(typeitem,typeindex) in workerTypes" :key="typeitem.id" :class="{'activetype':arr.includes(typeitem)}" @tap="selectWorkertype(typeitem,typeindex)">
					<text>{{typeitem}}</text>
				</view>
			</view>
		</u-popup>
		<!-- 选择上门日期 -->
		 <good-date-picker ref="subscribeTimes" @change="changeDate" :option="subscribeTimesoption"></good-date-picker>
		 <!-- 选择上门时间 -->
		 <u-picker mode="multiSelector" v-model="showTimepicker"  :default-selector="timeSelected" :range="timeSelector" confirm-color="rgba(14, 174, 100, 1)" title="请选择时间段" @confirm="selectTimequjian" @cancel="closeTimepicker()"></u-picker>
	</view>
</template>

<script>
	import {url,classList,addHire} from '@/apis/request.js';
	import GoodDatePicker from '@/components/xiaomiaogu-good-date-picker/xiaomiaogu-good-date-picker.vue';
	export default {
		components:{GoodDatePicker},
		data() {
			return {
				navbarBack:{
					background:'transparent'
				},
				isCheckedotherservice:false,
				checkMethodindex:-1,
				subscribeTimesoption:{
					chooseOneDate: '', //根据实际业务需求设置的默认单选日期，可为空,默认今天
					initStartDate: '', //可选起始时间，可为空,默认今天
					initEndDate: '', //可选结束时间，可为空,默认4个月后
					isRange: false, //是否开启范围选择，默认false
					isModal:true,//是否弹窗模式，默认false
				},
				timeSelector:[],
				showTimepicker:false,
				timeSelected:[0,0,0,0,0],
				subscribeTime:'',
				timequjian:'',
				issetTime:false,
				isShowworkTypepopup:false,
				workerTypes:[],
				activetype:-1,
				comeadd:'',
				username:'',
				userphone:'',
				orderprice:'',
				workerInfo:{},
				usertoken:'',
				totalfee:0,
				couponId:'',
				couponprice:0,
				priceDisable:false,
				plaseChooseWork:'请选择工种',
				arr:[]
			}
		},
		created() {
			this.url=url;
			const thisdate=new Date();
			const thisdate_nextweek = new Date(thisdate);
			thisdate_nextweek.setDate(thisdate.getDate()+7);
			const thisdate_nextweek_year=thisdate_nextweek.getFullYear();
			const thisdate_nextweek_month = thisdate_nextweek.getMonth()+1;
			const thisdate_nextweek_day = thisdate_nextweek.getDate();
			this.$set(this.subscribeTimesoption,'initEndDate',`${thisdate_nextweek_year}-${thisdate_nextweek_month}-${thisdate_nextweek_day}`);
		    const hours = new Array();
			for(let hour=0;hour<24;++hour){
				hours.push(`${hour}时`);
			}
			const minutes = new Array();
			for(let minute=0;minute < 60;++minute){
				minutes.push(`${minute}分`);
			}
			this.timeSelector.push(hours);
			this.timeSelector.push(minutes);
			this.timeSelector.push(['至']);
			this.timeSelector.push(hours);
			this.timeSelector.push(minutes);
		},
		onLoad() {
			this.usertoken=uni.getStorageSync('userInfo').token;
			this.requestWorkertypes();
			this.workerInfo=uni.getStorageSync('employWorkerinfo');
		},
		onShow() {
			if(uni.getStorageSync('comeaddInfo')){
				const area=uni.getStorageSync('comeaddInfo').area;
				const add=uni.getStorageSync('comeaddInfo').address;
				this.comeadd=`${area}${add}`;
				this.username=uni.getStorageSync('comeaddInfo').name;
				this.userphone=uni.getStorageSync('comeaddInfo').phone;
			}
			if(uni.getStorageSync('useCouponIdprice')){
				this.couponId=uni.getStorageSync('useCouponIdprice').couponid;
				this.couponprice=uni.getStorageSync('useCouponIdprice').couponprice;
				this.priceDisable=true;
				this.useCoupon();
				
			}
		},
		onUnload() {
			uni.removeStorageSync('employWorkerinfo');
			if(uni.getStorageSync('useCouponIdprice')){
				uni.removeStorageSync('useCouponIdprice');
			}
		},
		methods: {
			// 选择工种
			selectWorkertype(item,i){
				 if(this.arr.includes(item)){
				                //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
				                //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
				                this.arr=this.arr.filter(function (ele){return ele != item;});
				            }else{
				                this.arr.push(item);
				            }
							
			},
			workClose(){
				console.log(this.arr)
				
				if(this.arr.length==0){
					this.plaseChooseWork='请选择工种'
				}else{
					this.plaseChooseWork = this.arr.toString()
				}
			},
			opendate() {
				this.$refs.subscribeTimes.open();
			},
			changeDate(e) {
				this.$set(this.subscribeTimesoption,'chooseOneDate',e.currentDate);
				this.subscribeTime=e.currentDate;
			},
			openTimepicker(){
				this.showTimepicker=true;
			},
			selectTimequjian(e){
				// console.log(e)
				const starthour=e[0];
				const startminute=e[1];
				const endhour=e[3];
				const endminute=e[4];
				if(endhour < starthour){
					uni.showToast({
						icon:'none',
						title:'开始时间不得大于结束时间'
					}); 
					return ;
				}else if(endhour==starthour && endminute < startminute){
					uni.showToast({
						icon:'none',
						title:'开始时间不得大于结束时间'
					});
					return ;
				}
				this.timeSelected=e;
				this.timequjian=`${this.timeSelector[0][e[0]]}${this.timeSelector[1][e[1]]}${this.timeSelector[2][e[2]]}${this.timeSelector[3][e[3]]}${this.timeSelector[4][e[4]]}`;
				this.issetTime=true;
				this.closeTimepicker();
			},
			closeTimepicker(){
				this.showTimepicker=false;
			},
			requestWorkertypes(){
				this.$http({
					url:classList,
					data:{
						pageIndex:1,
						pageSize:100,
						superiorId:1
					},
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						this.workerTypes=res[1].data.data;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//打开工种分类弹出层
			openWorktypelist(type){
				this.workerTypes= type.split(',')
				this.isShowworkTypepopup=true;
			},
			requestConfirmorder(){
			    if(this.comeadd == ''){
					uni.showToast({
						title:'none',
						title:'请选择上门地址'
					});
					return ;
				}
				if(this.subscribeTime==''){
					uni.showToast({
						icon:'none',
						title:'请选择上门日期'
					});
					return ;
				}
				if(!this.issetTime){
					uni.showToast({
						icon:'none',
						title:'请选择上门时间段'
					});
					return ;
				}
				if(this.plaseChooseWork=='请选择工种'){
					uni.showToast({
						icon:'none',
						title:'请选择工种'
					});
					return ;
				}
				if(this.orderprice==''){
					uni.showToast({
						icon:'none',
						title:'请输入订单金额'
					});
					return ;
				}
				if(this.checkMethodindex==-1){
					uni.showToast({
						icon:'none',
						title:'请选择支付方式'
					});
					return ;
				}
				const requestData={};
				requestData.address=this.comeadd;
				requestData.channel=this.checkMethodindex==0?'alipay':'wx';
				requestData.makeTime=`${this.subscribeTime} ${this.timequjian}`;
				requestData.masterId=this.workerInfo.id;
				requestData.name=this.username;
				requestData.nameOfWorkType=this.plaseChooseWork;
				requestData.nameOfWorkTypeId=this.workerInfo.jobId;
				requestData.phone=this.userphone;
				requestData.price=this.orderprice;
				//判断是否使用优惠券
				if(this.couponId!=''){
					requestData.appUserCouponId=this.couponId;
				}
				//判断是否使用准时宝
				if(this.isCheckedotherservice){
					requestData.punctualTreasurePrice=0.2;
				}else{
					requestData.punctualTreasurePrice='';
				}
				this.$http({
					url:addHire,
					data:requestData,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.usertoken
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						//拉支付
						
						setTimeout(()=>{
							uni.redirectTo({
								url:'paysuccess/paysuccess'
							});
						},200);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//选择地址
			changeAddress(){
				uni.navigateTo({
					url:`/pages/mine/address/address?mode=${'selectadd'}`
				});
			},
			changePaymethod(methodIndex){
				this.checkMethodindex=methodIndex;
			},
			//使用准时宝
			useOtherservice(){
				this.isCheckedotherservice=!this.isCheckedotherservice;
				if(this.isCheckedotherservice){
					this.totalfee=this.totalfee+0.2;
				}else{
					this.totalfee=this.totalfee-0.2;
				}
			},
			inputOrderprice(e){
				if(!isNaN(e.detail.value)){
					this.totalfee=Number((Number(this.totalfee)+Number(e.detail.value)).toFixed(2))-this.orderprice;
					this.orderprice=e.detail.value;
				}
			},
			selectCoupon(){
				if(this.orderprice==''){
					uni.showToast({
						icon:'none',
						title:'请先输入订单金额'
					});
					return ;
				}
				if(this.activetype==-1){
					uni.showToast({
						icon:'none',
						title:'请选择工种类型'
					});
					return ;
				}
				uni.navigateTo({
					url:`../coupons/coupons?orderprice=${this.orderprice}&worktypeid=${this.workerTypes[this.activetype].id}`
				});
			},
			useCoupon(){
				if(this.totalfee-this.couponprice < 0){
					this.totalfee=0;
				}else{
					this.totalfee=this.totalfee-this.couponprice;
				}
			}
		},
		filters:{
			getPriceTofixedtwo(val){
				return val.toFixed(2);
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		min-height: 100%;
		padding-bottom: 120rpx;
		background-color: rgba(244, 248, 251, 1);
		.container-navbar{
			width: 100%;
			height: 250rpx;
			background-color: rgba(98, 164, 251, 1);
		}
		.comeaddinfo{
			background-color:#FFFFFF;
			border-radius: 10rpx;
			width: 710rpx;
			height: auto;
			padding-top:30rpx;
			padding-bottom:30rpx;
			margin: auto;
			margin-top: -125rpx;
			.comeaddtext{width: 680rpx;height: auto;display: flex;margin: auto;}
			.addtext{width: 640rpx;margin-right: 10rpx;font-size: 32rpx;}
			.username-phone{width: 680rpx;display: flex;margin:auto;margin-top: 20rpx;font-size: 29rpx;}
			.workername{font-size: 30rpx;width: 680rpx;margin: auto;margin-top: 20rpx;}
			.userphone{margin-left: 15rpx;}
		}
		.ordertime-wtype-box{
			width: 710rpx;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			margin: auto;
			margin-top: 20rpx;
			.ordertime-wtype-item{width: 680rpx;display: flex;align-items: flex-end;margin: auto;margin-bottom: 30rpx;}
			.itemtitle{width: 150rpx;font-size: 29rpx;}
			.itemright{flex: 1;display: flex;}
			.changedate{color: #888;font-size: 28rpx;}
			.changeclock{color: #888; font-size: 28rpx; margin-left: 15rpx;}
			.changed{color: rgba(255, 157, 92, 1);}
			.changework-type{color: #888; font-size: 28rpx;flex: 1;}
			.worker-shtime{color: #888;font-size: 28rpx;flex: 1;color: rgba(34, 34, 34, 1);}
			.lastitem{margin-bottom: 0rpx;}
		}
		.payprice-info{
			width: 710rpx;
			margin: auto;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			.payprice-infoitem{
				width: 680rpx;
				margin: auto;
				margin-bottom: 30rpx;
				display: flex;
				.itemtitle{width: 150rpx;font-size: 29rpx;}
				input{flex: 1;font-size: 28rpx;}
			}
			.coupon-select{justify-content: space-between;}
			.other-service{justify-content: space-between;}
			.other-service-left{
				width: 530rpx;
				text{
					display: block;
					width: 100%;
				}
				.service-title{font-size: 29rpx;}
				.service-value{font-size: 25rpx;color: rgba(255, 158, 93, 1);margin-top: 15rpx;}
			}
			.other-service-right{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				.check-select{width: 33rpx; height: 33rpx; border-radius:100%;font-size: 15rpx;display: flex;justify-content: center;align-items: center;margin-left: 10rpx;}
				.notcheck{border: 1rpx solid #888;box-sizing: border-box;}
				.checked{background-color: rgba(255, 157, 92, 1);color: #fff;}
			}
			.lastitem{margin-bottom: 0rpx;}
		}
		.pay-methods{
			background-color: #FFFFFF;
			border-radius: 10rpx;
			width: 710rpx;
			margin: auto;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			margin-top:20rpx;
			.pay-methods-title{display:block;width:680rpx;margin: auto;font-size: 29rpx;}
			.paymethod-item{width: 680rpx;margin: auto;display: flex;justify-content: space-between;margin-top: 25rpx;}
			.paymethod-item-left{
				display: flex; 
				flex: 1;
				align-items: center;
				text{font-size: 28rpx;margin-left: 15rpx;}
			}
			.paymethod-item-right{width: 33rpx;height: 33rpx;border-radius: 100%;font-size: 15rpx;color: #FFFFFF;display: flex;justify-content: center;align-items: center;}
		    .checked{background-color: rgba(255, 157, 92, 1);}
			.notcheck{border: 1rpx solid #888;box-sizing: border-box;}
		}
		.getpay{
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 0rpx;
			.getpay-left{flex: 1;margin-left: 35rpx;}
			.getpay-left-title{font-size: 28rpx;}
			.pay-price{color: rgba(255, 0, 0, 1);font-size: 26rpx;}
			.getpay-btn{border-radius: 10rpx;width: 200rpx;height: 75rpx;background-color: rgba(14, 174, 100, 1);color: #FFFFFF;font-size: 26rpx;display: flex;justify-content: center;align-items: center;margin-right: 20rpx;}
		}
		.worktypes{
			 width: 680rpx;
			 height: auto;
			 padding-top: 20rpx;
			 padding-bottom: 40rpx;
			 display: flex;
			 margin: auto;
			 flex-wrap: wrap;
			 .worktype-item{width: 200rpx;height: 70rpx;background-color: rgba(239, 239, 239, 1);text-align: center;line-height: 70rpx;font-size: 28rpx;margin-left: 20rpx;margin-top: 20rpx;color: rgba(68, 68, 68, 1);}
		 }
		 .activetype{
			 background-color: rgba(14, 174, 100, 0.3) !important;
			 color: rgba(14, 174, 100, 1) !important;
		 }
	}
</style>
